<template>
  <!-- 添加或修改器具明细表对话框 -->
  <jy-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="类别" prop="qjId">
        <el-select v-model="form.qjId" placeholder="请选择类别" style="width: 100%;" clearable>
          <el-option v-for="bi in (currentNode.label && currentNode.label.indexOf('筒') != -1 ? qjTList : qjHList)" :key="bi.syQjId" :label="bi.syQjName" :value="bi.syQjId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="盒（筒）号" prop="hh">
        <el-input v-model="form.hh" placeholder="请输入盒（筒）号" />
      </el-form-item>
      <el-form-item label="质量（g）" prop="quality">
        <el-input v-model="form.quality" type="number" placeholder="请输入质量" />
      </el-form-item>
      <el-form-item label="筒容积（cm3）" prop="tongrj" v-if="currentNode.label && currentNode.label.indexOf('筒') != -1">
        <el-input v-model="form.tongrj" type="number" placeholder="请输入筒容积" />
      </el-form-item>
      <el-form-item label="标定日期" prop="htime">
        <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="form.htime" type="date" clearable placeholder="选择时间" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="标定人员" prop="hper">
        <el-input v-model="form.hper" placeholder="请输入标定人员" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button size="small" @click="cancel">取 消</el-button>
    </div>
  </jy-dialog>
</template>
<script>
import { getBaQjDetail, addBaQjDetail, updateBaQjDetail, qjList } from "@/api/sycs/baQjDetail";
import store from "@/store";
import { mapGetters } from "vuex";
export default {
  name: "BaQjDetailAddOrUpdate",
  props: {
    currentNode: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 器具明细表表格数据
      baQjDetailList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        qjId: undefined,
        remark: undefined,
        hh: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        qjId: [{ required: true, message: "盒类别不能为空", trigger: "blur" }],
        hh: [{ required: true, message: "盒（筒）号不能为空", trigger: "blur" }],
        quality: [{ required: true, message: "质量不能为空", trigger: "blur" }],
        tongrj: [{ required: true, message: "筒容积不能为空", trigger: "blur" }],
        htime: [{ required: true, message: "标定日期不能为空", trigger: "change" }],
        hper: [{ required: true, message: "标定人员不能为空", trigger: "blur" }]
      },
      syTypeName: undefined,
      options: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 当前树节点
      // currentNode: {},
      oneShow: false, // 点击树显示子表
      twoShow: false, // 点击显示详情表
      // qjList: [], // 器具类别列表
      qjHList: [], // 盒类别列表
      qjTList: [], // 筒类别列表
      defaultDate: new Date() // 默认当前系统时间
    };
  },
  computed: {
    ...mapGetters(["deptId"])
  },
  watch: {
    deptId(newValue, oldValue) {
      this.deptId = newValue;
    }
  },
  created() {
    this.getQjList();
  },
  mounted() {},
  methods: {
    init(id, qjId) {
      this.reset();
      this.open = true;
      if (id) {
        this.form.detailId = id;
        this.getInfo();
        this.title = "修改";
      } else {
        this.form.qjId = qjId;
        this.title = "新增";
      }
    },
    getInfo() {
      this.loading = true;
      getBaQjDetail(this.form.detailId).then((response) => {
        this.loading = false;
        this.form = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.detailId != null) {
            updateBaQjDetail(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.$emit("callBack");
                this.open = false;
                this.reset();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            // let deptId= this.deptId?this.deptId:this.$store.state.dept.deptId;
            if (!this.deptId) {
              this.$alert("", "请选择试验室", {
                confirmButtonText: "确定",
                type: "warning",
                center: true
              });
              this.buttonLoading = false;
              return;
            }
            this.$set(this.form, "deptId", this.deptId);
            addBaQjDetail(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.$emit("callBack");
                this.open = false;
                this.reset();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    getQjList() {
      qjList().then((response) => {
        // this.qjList = response.data
        if (response.data) {
          this.qjHList = response.data.filter((item) => item.syQjName.indexOf("筒") == -1);
          this.qjTList = response.data.filter((item) => item.syQjName.indexOf("筒") != -1);
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        detailId: undefined,
        qjId: undefined,
        remark: undefined,
        hh: undefined,
        htime: this.parseTime(new Date().getTime(), "{y}-{m}-{d}"),
        delFlag: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined
      };
      this.resetForm("form");
      this.defaultDate = new Date();
      this.form.hper = store.state.user.name;
    }
  }
};
</script>
<style lang="scss" scoped></style>
